<template>
  <div>
    <el-bread-crumb secondtitle="权限管理" thirdtitle="权限列表"></el-bread-crumb>
    <el-card-comon>
      <template>

        <!-- 搜索框、按钮 -->
        <el-btn-serch-input btnTxt="添加权限" :queryInfo.sync="page" 
        inputContentClearEmitName="clearInput"
        searchEmitName="search"
        openDialogEmitName="addDialog" />

        <!-- 表格 -->
        <right-table :rightList="rightList"></right-table>

        <!-- 分页 -->
        <el-pagination-com 
          :nowPage.sync="page.pageNum" 
          :total="total" 
          :pageNumber.sync="page.pageSize"
          :changeSizeName="'getRightList'"
          :changeSizeNumberName="'getRightList'"></el-pagination-com>

      </template>

      <!-- dialog -->
      <right-add-dialog />
      <right-upd-dialog />
    </el-card-comon>
  </div>
</template>

<script>
// 网络请求
import { getAllRight } from '@/network/rightControlRequest';

// 引入组件
import ElBreadCrumb from '@/components/common/ElBreadCrumb';
import ElCardComon from '@/components/common/ElCardComon';
import RightTable from '@/views/Main/rightList/rightListComponents/RightTable';
import ElPaginationCom from '@/components/common/ElPaginationCom';
import ElBtnSerchInput from '@/components/common/ElBtnSerchInput';
import RightAddDialog from '@/views/Main/rightList/rightListComponents/RightAddDialog';
import RightUpdDialog from '@/views/Main/rightList/rightListComponents/RightUpdDialog';

export default {
  data() {
    return {
      rightList: [], // 权限数据
      page: {
        pageNum: 1, // 当前第多少页
        pageSize: 10, // 当前页面显示10条
        query: ''
      },
      total: 0, // 数据总数
    }
  },
  methods: {
    /**
     * 获取所有权限管理列表
     */
    async getAllRightFunc() {
      // console.log(this.page);
      const {data, meta} = await getAllRight(this.page);
      if (meta.status !== 200) { return this.$message.error(meta.msg);}
      
      // success
      this.total = data.page.total;
      this.rightList = data.page.list;
    },

    /**
     * 开启添加权限dialog
     */
    async openAddDialog() {
      this.$bus.$emit('openDialog');
    }
  },
  created() {
    this.getAllRightFunc();
    this.$bus.$on('clearInput', this.getAllRightFunc);
    this.$bus.$on('search', this.getAllRightFunc);
    this.$bus.$on('addDialog', this.openAddDialog);
    this.$bus.$on('getRightList', this.getAllRightFunc);
  },
  destroyed() {
    this.$bus.$off('clearInput');
    this.$bus.$off('search');
    this.$bus.$off('addDialog');
    this.$bus.$off('getRightList');
  },
  components: {
    ElBreadCrumb,
    ElCardComon,
    RightTable,
    ElPaginationCom,
    ElBtnSerchInput,
    RightAddDialog,
    RightUpdDialog
  }
}
</script>

<style lang="scss" scoped>
  .el-table{
    margin-top: 20px;
  }
</style>